<template>
  <!-- #ifdef MP-WEIXIN -->
  <uv-navbar
    :fixed="false"
    :title="title"
    left-arrow
    @leftClick="$onClickLeft"
  />
  <!-- #endif -->
  <view class="">
    <view class="bg-white">
      <uv-tabs :list="list" @click="handleSelect" :scrollable="false"></uv-tabs>
    </view>
    <view class="pl-2 pr-3 pb-3">
      <scroll-view
        scroll-y
        class="sv"
        :style="{ height: scrollHeight + 'px' }"
        :scroll-top="scrollTop"
        @scrolltolower="reachBottom"
      >
        <view class="" v-for="(item, index) in dataList" :key="index">
          <view class="py-3 pl-2">{{ item.name }}</view>
          <view class="flex flex-wrap" v-if="item.childrens.length > 0">
            <view
              class="b-width"
              v-for="(item2, index2) in item.childrens"
              :key="index2"
            >
              <view
                v-if="deskStatus == 'empty'"
                class="p-3 text-center font-weight-bolder"
                style="background-color: #909399; color: #ffffff"
                @click="detail(item2, 'empty')"
              >
                <view class="p-1">{{ item2.number }}</view>
                <view class="p-1">{{ currentLanguageTexts.Idle }}</view>
              </view>
              <view
                v-else
                class="p-3 text-center font-weight-bolder"
                style="background-color: #09b4f1; color: #ffffff"
                @click="detail(item2, 'ing')"
              >
                <view class="p-1">{{ item2.number }}</view>
                <view class="p-1">{{
                  currentLanguageTexts.fourthStatusDining
                }}</view>
              </view>
              <view class="bg-white font-size-sm p-2 text-center">{{
                formatPast(item2.lastOrderTime)
              }}</view>
            </view>
          </view>
          <uv-empty
            :text="currentLanguageTexts.NoMoment"
            v-else
            margin-top="20"
            mode="list"
          ></uv-empty>
        </view>
      </scroll-view>
    </view>
    <uv-tabbar
      :value="value"
      @change="(index) => (value = index)"
      activeColor="#09b4f1"
    >
      <uv-tabbar-item
        :text="currentLanguageTexts.homePage"
        icon="home"
      ></uv-tabbar-item>
      <uv-tabbar-item
        :text="currentLanguageTexts.menuOrder"
        icon="order"
        @click="gopage('/pages/components/pages/merchant/order')"
      ></uv-tabbar-item>
      <uv-tabbar-item
        :text="currentLanguageTexts.Desk"
        icon="bell"
        @click="gopage('/pages/components/pages/merchant/bell')"
      ></uv-tabbar-item>
      <uv-tabbar-item
        :text="currentLanguageTexts.mine"
        icon="account"
        @click="gopage('/pages/components/pages/merchant/my')"
      ></uv-tabbar-item>
      <uv-tabbar-item
        :text="currentLanguageTexts.return"
        icon="arrow-leftward"
        @click="gopage2('/pages/index/index')"
      ></uv-tabbar-item>
    </uv-tabbar>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow, onUnload, onLoad, onReady } from '@dcloudio/uni-app';
import { getList } from '@/api/due';
import { useMainStore } from '@/store/store';
import { storeToRefs } from 'pinia';
import { formatPast } from '@/utils/util';
const main = useMainStore();
const { merchartShop, currentLanguageTexts } = storeToRefs(main);
const title = ref(currentLanguageTexts.value.Desk);
const scrollHeight = ref(0);
const pH = ref(0);
const scrollTop = ref(-1);
const dataList = ref([]);
const dx = ref(0);
const page = ref(1);
const pageSize = ref(10);
const lastPage = ref(false);
const listStatus = ref('loadmore');
let timer = ref('');
let inter = null;
const value = ref(2);
const deskStatus = ref('empty');

const list = ref([
  {
    name: currentLanguageTexts.value.Idle,
    value: 'empty',
  },
  {
    name: currentLanguageTexts.value.fourthStatusDining,
    value: 'ing',
  },
]);

onReady(() => {
  uni.getSystemInfo({
    success(res) {
      pH.value = res.windowHeight;
      let scrollH = uni.createSelectorQuery().select('.sv');
      scrollH
        .boundingClientRect((data) => {
          let pH0 = pH.value;
          scrollHeight.value = pH0 - data.top - 5;
        })
        .exec();
    },
  });
});

onLoad(() => {
  getData();
  // inter = setInterval(() => {
  // 	getData()
  // }, 30000)
});

onUnload(() => {
  //clearInterval(inter)
});

// 滚动到底部
const reachBottom = () => {};

const handleSelect = (key) => {
  deskStatus.value = key.value;
  getData();
};

const gopage = (url) => {
  uni.navigateTo({
    url,
  });
};

const gopage2 = (url) => {
  uni.switchTab({
    url,
  });
};

const getNewPath = (path) => {
  const tempPath = decodeURIComponent(path);
  const strList = tempPath.split('?scene=');
  const scene = encodeURIComponent(strList[1]);
  const newPath = strList[0] + '?scene=' + scene;

  return newPath;
};

const detail = (desk, type) => {
  if (type == 'empty') {
    main.SET_UID_TYPE('admin');
    //单号不存在去开台

    let newPath =
      'pages/components/pages/scan/scan?scene=id=' +
      desk.id +
      '&number=' +
      desk.number +
      '&shopId=' +
      desk.shopId;
    uni.navigateTo({
      url: '/' + getNewPath(newPath),
    });

    //// #ifdef  H5

    //// #endif
  } else {
    uni.navigateTo({
      url:
        '/pages/components/pages/orders/detail?id=' +
        desk.lastOrderNo +
        '&isMer=1',
    });
  }
};

const getData = async () => {
  let desks = await getList({
    shopId: merchartShop.value.id,
    deskStatus: deskStatus.value,
  });

  dataList.value = desks;
};
</script>

<style lang="scss">
.b-width {
  width: 30%;
  margin-left: 20rpx;
  margin-top: 20rpx;
}
</style>
